<template>
  <div>
    <a-input-search
      readonly
      :value="value"
      style="width: 100%"
      placeholder="请选择图标"
      @search="openModal"
    />
    <a-modal v-model:visible="visible" title="选择图标" @ok="ok">
      <a-radio-group v-model:value="active" button-style="solid">
        <a-radio-button value="1">线框风格</a-radio-button>
        <a-radio-button value="2">实底风格</a-radio-button>
        <a-radio-button value="3">双色风格</a-radio-button>
      </a-radio-group>

      <div class="iconList">
        <span v-for="(item, i) in iconList" class="icons-list" :key="i">
          <span v-if="active == 1">
            <component
              class="icon"
              :class="{ active: item == value }"
              @click="sendMsg(iconList[i])"
              v-if="iconList[i].indexOf('Outlined') > 0"
              :is="$antIcons[iconList[i]]"
            />
          </span>
          <span v-if="active == 2">
            <component
              class="icon"
              :class="{ active: item == value }"
              @click="sendMsg(iconList[i])"
              v-if="iconList[i].indexOf('Filled') > 0"
              :is="$antIcons[iconList[i]]"
            />
          </span>
          <span v-if="active == 3">
            <component
              class="icon"
              :class="{ active: item == value }"
              @click="sendMsg(iconList[i])"
              v-if="iconList[i].indexOf('TwoTone') > 0"
              :is="$antIcons[iconList[i]]"
            />
          </span>
        </span>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, defineProps, toRefs } from "vue";
import iconList from "./icons.json";
const emits = defineEmits(["update:value"]);
const props = defineProps({
  value: String,
});
const { value } = toRefs(props);
const visible = ref(false);
const active = ref(1);

function sendMsg(iconText) {
  emits("update:value", iconText);
}
function openModal() {
  visible.value = true;
}
function ok() {
  visible.value = false;
}
</script>

<style scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}

.icon:hover {
  background-color: #1890ff;
  color: white;
}
.active {
  background-color: #1890ff;
  color: white;
}

.iconList {
  height: 200px;
  overflow-y: auto;
  margin-top: 20px;
}
</style>
